<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每日笔记</title>
</head>
<body>
.main {
/*弹性布局，设置flex布局之后子元素的float，clear，vertical-align属性会失效*/
display: flex;
border: 1px  solid black;

/*flex-direction决定主轴方向，row默认值，row-reversex轴右端为起点*/
/*colum主轴为垂直，起点从上到下。column-reverse起点在下*/
flex-direction: row;
height: 500px;

/*flex-wrap设置要不要换行，默认nowrap不换行，如果不换行的太多会被挤压*/
/*wrap-reverse上下反转*/
flex-wrap: nowrap;

/*设置对齐方式，默认左对齐flex-start。*/
/*justify-content: flex-end;右对齐*/
/* justify-content: space-between;从两边开始向中间，两边贴近边框*/
/*space-around两边有间隔*/
/*主轴对齐方式 */
justify-content: space-around;

/*交叉轴对齐方式,默认是flex-start上对齐，*/
/*交叉轴下对齐align-items: flex-end;*/
/*针对于单根轴线align-items*/
align-items: center;

/* flex-wrap: nowrap;设置文本换行的话，align-content会生效，他会觉得不止一个轴线*/
/*针对多跟轴线*/
align-content: flex-end;
}
.text, .text1 {
width: 100px;
height: 100px;
/*背景颜色混合，45度角开始，加上颜色*/
background-image: linear-gradient(45deg,green,white,lightskyblue);
}
</body>
</html>